<template>
    <div class="FormView">
        <a-input v-model:value="username" placeholder="用户名" @keyup.enter="Login">
            <template #prefix>
                <user-outlined class="icon" type="user" />
                &nbsp;&nbsp;
            </template>
        </a-input>
        <br><br>
        <a-input-password v-model:value="password" placeholder="密码" @keyup.enter="Login">
            <template #prefix>
                <lock-outlined class="icon" type="user" />
                &nbsp;&nbsp;
            </template>
        </a-input-password>
        <div class="OtherButton">
            <!-- <a-button type="link" @click="emit('regist')">注册</a-button> -->
        </div>
        <a-button type="primary" :loading="loading" block @click="Login">登录</a-button>
    </div>
</template>
<script lang="ts" setup>
import { nextTick, ref } from 'vue';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';
import { useStorage } from '@vueuse/core'
import { initRouter } from './Router'
import User from '@/apis/user.js'
import { notification } from 'ant-design-vue'

const emit = defineEmits(['regist']);

const username = ref<String>();
const password = ref<String>();
const router = useRouter();
const Token = useStorage('token', '', localStorage);
const Permission = useStorage('permission', '', localStorage);
const NickName = useStorage('NickName', '', localStorage);

const loading = ref<boolean>(false);
function Login() {
    if (!username.value) {
        notification.error({ message: '用户名不能为空' });
        return;
    };
    if (!password.value) {
        notification.error({ message: '密码不能为空' });
        return;
    };
    loading.value = true;
    var data = User.Login({
        username: username.value,
        password: password.value
    });
    data.then((res: any) => {
        loading.value = false;
        Token.value = res.token;
        Permission.value = res.permission;
        NickName.value = res.nickname;
        nextTick(() => {
            initRouter('user');
            router.push('/main/home');
        })
    }).catch((res: any) => {
        loading.value = false;
    });
};


</script>
<style lang="less" scoped>
.OtherButton {
    padding: 10px 0;
    margin: 0 -16px;
}

.icon {
    color: rgba(255, 255, 255, 0.7);
}

:deep(.ant-input-affix-wrapper) {
    background-color: transparent !important;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0;
    padding: 4px;
    outline: none;
    box-shadow: none !important;

    &:hover {
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: 1px solid #40a9ff8a;
    }
}

:deep(.ant-input) {
    background-color: transparent !important;
    border-radius: 0;
    padding: 4px;
    color: rgba(255, 255, 255, 0.7);

    &::placeholder {
        color: rgba(255, 255, 255, 0.3);
    }
}
</style>